<template>
  <div class="fxs-store-container">
    <header>
      <div class="store-card">
        <div class="img">
          <!-- TODO 上传门店图片 -->
          <div class="store-upload-img" @click="UploadImgBtn">
            <img :src="storeLogo" alt mode="scaleToFill"/>
          </div>
        </div>
        <!-- <if condition="$user['store_title']">{$user.store_title}<else/>{$shop.title}</if> -->
        <!-- <p>{{storeTitle}}</p> -->
        <div class="store-name">
          <div class="reset-name">
            <input type="text" placeholder="点击添加店铺名称" v-model="keyWord" />
          </div>
          <!-- <div class="reset-name" @click="handleShow">
            <input type="text" placeholder="点击添加店铺名称" ref="getFocus" v-model="keyWord" autofocus="autofocus" v-if="isShowInput" @blur="handleBlur" />
            <p v-else>{{keyWord + shop_suffix}}</p>
          </div> -->
        </div>
        <div class="btn-item">
          <van-button class="btn" color="#F30C23" plain round v-if="is_store_wx" @click="handleClickReset">恢复微信信息</van-button>
          <van-button class="btn" color="#F30C23" plain round v-else @click="handleClickReset">恢复总店图片</van-button>
          <van-button class="btn" color="linear-gradient(90deg,rgba(254,34,78,1),rgba(233,1,4,1))" round v-if="is_open" @click="editStoreNane">保存修改</van-button>
          <van-button class="btn" color="linear-gradient(90deg,rgba(254,34,78,1),rgba(233,1,4,1))" round v-else @click="editStoreNane">立即开通</van-button>
        </div>
      </div>
    </header>
    <main>
      <div class="more" v-if="description_show == 1">
        <p v-if="introduce==1 && store_description" v-html="store_description"></p>
        <div v-else>
          <p class="tt">什么是店中店？</p>
          <p
            class="cent"
          >店中店功能是该系统的功能亮点之一。是可以让{{ftitle_agents}}下家拥有一个与{{ftitle_agents}}相同的商品展示店铺，在增加客户信任感的同时增加销量。</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
// import storeImg from '@img/user/upimg.png'
import { getStore, editStore, resetStore } from '@/api/user/fxs/fxsApi'
import { uploadImgs } from '@/api/community/article'
import small from '@/smallapp/small'

import Vue from 'vue'
import { Uploader } from 'vant'

Vue.use(Uploader)
export default Vue.extend({
  data() {
    return {
      storeImg:'https://img.wifenxiao.com/h5-wfx/images/user/upimg.png',
      imgList:[],
      store_logo: '',
      store_title: '',
      title: '',
      keyWord: '',
      is_store_wx: '',
      is_open: '',
      description_show: '',
      introduce: null,
      store_description: '',
      ftitle_agents: '',
      fileList: [],
      // isShowInput: false,
      // timer: null
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * 初始化页面数据
     */
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      getStore().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
            wx.setNavigationBarTitle({
              title: res.data.ftitle_store
            })
          this.store_logo = res.data.user.store_logo
          this.store_title = res.data.user.store_title
          this.title = res.data.shop.title
          this.keyWord = res.data.user.store_title
          this.is_store_wx = res.data.is_store_wx
          this.is_open = res.data.is_open
          this.description_show = res.data.description_show
          this.introduce = res.data.introduce
          this.store_description = res.data.store_description
          this.ftitle_agents = res.data.ftitle_agents
        } else {
          this.$Error(res.msg)
        }
      })
    },
    //小程序上传图片
    UploadImgBtn(){
      small.wxUploadFile(this.ChangeImgLen).then((data) => {
        let imgList = this.imgList

        imgList = imgList.concat(data)

        // 当操作涉及到多张图片的时候这里截取到前5张
        if (imgList.length > 5) {
          imgList = imgList.splice(0, 5)
        }

        this.imgList = imgList

        const imgLen = imgList.length
        this.ChangeImgLen = 5 - imgLen

        this.store_logo = this.imgList[0]
        this._editStore({
          'avatar':this.store_logo
        })
      })
    },
    /**
     * 上传图片
     */
    afterRead(file) {
      const form = new FormData()
      form.append('file', file.file)
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      uploadImgs(form).then(res => {
        if (res.status === 1) {
          this.store_logo = res.data.pic_url
          const form = new FormData()
          form.append('avatar', res.data.pic_url)
          this._editStore(form)
        } else {
          this.$Error('上传失败, 请重新上传')
        }
      }).catch(() => {
        this.$Error('上传失败, 请重新上传')
      })
    },
    /**
     * 开通、编辑事件
     */
    editStoreNane() {
      // const store_title = this.keyWord
      // const form = new FormData()
      if (!this.keyWord) {
        this.$Error('店铺名称不能为空！')
        return false
      }
      // form.append('store_title', this.keyWord)
      const form={
        store_title:this.keyWord
      }
      this.showOverlay = true
      setTimeout(() => {
        // 假如接口没有反应 10s关闭遮罩
        this.showOverlay = false
      }, 10000)
      this._editStore(form)
    },

    // handleShow() {
    //   if (this.timer) {
    //     clearTimeout(this.timer)
    //   }
    //   this.isShowInput = true
    //   this.timer = setTimeout(() => {
    //     this.$refs.getFocus.focus()
    //   }, 100)
    // },
    /**
     * 开通、编辑的接口
     */
    _editStore(data) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      // console.log(data)

      editStore(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // this.store_title = this.keyWord
          const msg = this.is_open ? '修改成功' : '开通成功'
          this.$Error(msg)
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    /**
     *点击重置按钮
     */
    handleClickReset() {
      resetStore().then(res => {
        if (res.status == 1) {
          this.$Error('重置成功')
          // this.isShowInput = false
          // this.timer = null
          this.init()
        }
      })
    }
  },
  beforeDestroy() {
    this.imgList = []
  },
  computed: {
    storeTitle() {
      return this.store_title || this.title
    },
    storeLogo() {
      return this.store_logo || this.storeImg
    }
  },
  components: {
    // Upload
  }
})
</script>

<style lang="scss">
.fxs-store-container{
  header {
    // display: inline-block;
    // height: 490px;
    background: url('https://img.wifenxiao.com/h5-wfx/images/user/store_bg.png?20200811') center top no-repeat;
    background-size: 100% auto;
    .store-card {
      display: inline-block;
      position: relative;
      width: 710px;
      height: 300px;
      margin: 190px 20px 0;
      background-color: #fff;
      border-radius: 20px;
      .img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 4px solid #fff;
        overflow: hidden;
        background: #fff;
        .store-upload-img{
          width:100%;
          height:100%;
          .samll-upload-box{
            padding:0;
            width:100%;
            height:100%;
          }
        }
        img {
          width: 150px;
          height: 150px;
        }
      }
      .store-name {
        text-align: center;
        font-size: 36px;
        margin-top: 90px;
        font-weight: bold;
        input{
          text-align:center;
        }
        // p{
        //   padding: 17.5px 0;
        // }
      }
      .btn-item {
        display: flex;
        justify-content: center;
        margin-top:44px;
        .btn{
          width:236px;
          height:72px;
          margin-left:20px;
          font-size: 28px;
          &:first-child{
            margin-left:0;
          }
        }
      }
    }
  }
  main {
    /* .store-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 710px;
      height: 160px;
      border-radius: 20px;
      background-color: #fff;
      padding: 0 35px;
      margin: 20px auto 0;
      .reset-name {
        p {
          font-size: 24px;
          color: #666;
        }
        input {
          border: none;
          margin-top: 20px;
          font-size: 30px;
          font-weight: bold;
          &::placeholder {
            color: #252525;
          }
        }
      }
      button {
        width: 220px;
        height: 68px;
        line-height: 68px;
        border-radius: 34px;
        font-size: 26px;
        color: #fff;
        background-color: #ff6e00;
        border: none;
        outline: none;
      }
    } */
    .more {
      overflow:hidden;
      border-radius: 20px;
      background-color: #fff;
      padding: 35px;
      margin: 20px;
      .tt {
        font-size: 36px;
        color: #F30C23;
        margin-bottom: 30px;
        margin-top: 10px;
      }
      .cent {
        font-size: 26px;
        color: #333;
        line-height: 2;
      }
    }
  }
}
</style>
